var CANVAS_W = 800;                //canvas 宽度
var CANVAS_H = 600;                //canvas 高度
var X0 = 400; 
var Y0 = 580;
var PO = {x:X0, y:Y0};             //树形图案起点
var LENGTH = 200;                  //树干长度
var DATA = [[30, 0.7], [-30, 0.6]] //分枝数据
 
function main() {
	var ctx = document.getElementById('canvas').getContext('2d');
	draw_background(ctx, '#99cc33');
	draw_tree(ctx)
}

function point(x, y) {
	return {x:x, y:y}
}

function A2R(angle) {
	return angle * Math.PI / 180.0;
}

function draw_background(ctx, color) {
	ctx.fillStyle=color;
	ctx.fillRect(0, 0, CANVAS_W, CANVAS_H);
}

function draw_line(ctx, p1, p2) {
	ctx.moveTo(p1.x, p1.y);
	ctx.lineTo(p2.x, p2.y);
	ctx.stroke();
}

function line_end(p, l, angle) {
	var r = A2R(angle);
	return point(p.x + l * Math.cos(r), p.y - l * Math.sin(r));
}

function draw_tree(ctx) {
	var i;
	var init_angle = 90.0;
	ctx.strokeStyle="white";
	var p = line_end(PO, LENGTH, init_angle);
	draw_line(ctx, PO, p); 
	for(i = 0; i < DATA.length; ++i) {
		var b = DATA[i];
		draw_line(ctx, p, line_end(p, LENGTH * b[1], init_angle + b[0]));
	}
}


